import { Link } from '@brillout/docpress'
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'
import '../../../components/tabs.css'
import { BlogHeader } from '../BlogHeader'

<BlogHeader authors={['magne4000', 'nitedani', 'brillout']} date={new Date('2025-03-26')} />

We (<Link href="/team">Joël, Dani, and Rom</Link>) have been working on a <Link href="/vike-server">new Vike extension `vike-server`</Link> which can integrate Vite with any server (Express.js, Hono, Fastify, Elysia, H3, ...) and any deployment (VPS, Netlify, Cloudflare, Vercel, ...).

With `vike-server` you get:
 - Server code **transpiled by Vite** (say goodbye to `ts-node`/`tsx`/`vavite` and hello to Vite utilities such as `import.meta.env`)
 - **Zero-config** (Vike is automatically added to your server)
 - **HMR** (no more full server reloads)

We've been beta testing it for months and it's now stable and released as `1.0.0` — you can use it for production.

> Unsurprisingly, using Vite to transpile server code was one of the most requested features. In fact, it was Vike's last significant shortcoming: Vike can now be considered a full-fledged framework. We're a lot <Link href="#releasing-1-0">closer to releasing `vike@1.0.0`</Link>!

You can use `vike-server` but you don't have to:
- If you fully <Link href="/pre-rendering">pre-render your app (SSG)</Link> then you don't need `vike-server`.
- If you have unusual requirements, you can keep manually integrating your server.

> This follows Vike's philosophy that <Link href="/extension-vs-custom">Vike extensions are all optional</Link>: use `vike-server` for an easy integration or, if you prefer, manually integrate the server for full control.


## Zero-config

This is how it looks like:

<Tabs>
  <TabList>
    <Tab>Express.js</Tab>
    <Tab>Hono</Tab>
    <Tab>Fastify</Tab>
    <Tab>H3</Tab>
    <Tab>Elysia</Tab>
  </TabList>

  <TabPanel>
    ```ts
    // server/index.ts

    import express from 'express'
    import { apply } from 'vike-server/express'
    import { serve } from 'vike-server/express/serve'

    function startServer() {
      const app = express()
      apply(app)
      return serve(app, { port: 3000 })
    }

    export default startServer()
    ```
  </TabPanel>
  <TabPanel>
    ```ts
    // server/index.ts

    import { Hono } from 'hono'
    import { apply } from 'vike-server/hono'
    import { serve } from 'vike-server/hono/serve'

    function startServer() {
      const app = new Hono()
      apply(app)
      return serve(app, { port: 3000 })
    }

    export default startServer()
    ```
  </TabPanel>
  <TabPanel>
    ```ts
    // server/index.ts

    import fastify from 'fastify'
    import rawBody from 'fastify-raw-body'
    import { apply } from 'vike-server/fastify'
    import { serve } from 'vike-server/fastify/serve'

    async function startServer() {
      const app = fastify({
        // ⚠️ Mandatory for HMR support
        forceCloseConnections: true
      })

      // ⚠️ Mandatory for Vike middlewares to operate properly
      await app.register(rawBody)
      await apply(app)
      return serve(app, { port: 3000 })
    }

    export default startServer()
    ```
  </TabPanel>
  <TabPanel>
    ```ts
    // server/index.ts

    import { createApp } from 'h3'
    import { apply } from 'vike-server/h3'
    import { serve } from 'vike-server/h3/serve'

    function startServer() {
      const app = createApp()
      apply(app)
      return serve(app, { port: 3000 })
    }

    export default startServer()
    ```
  </TabPanel>
  <TabPanel>
    ```ts
    // server/index.ts

    import { Elysia } from 'elysia'
    import { apply } from 'vike-server/elysia'
    import { serve } from 'vike-server/elysia/serve'

    function startServer() {
      const app = apply(new Elysia())
      return serve(app, { port: 3000 })
    }

    export default startServer()
    ```
  </TabPanel>
</Tabs>

Where:
 - `apply()` installs the middleware of Vike and Vike extensions.
 - `serve()` attaches your server to Node.js, Cloudflare, Vercel, Deno, Bun, Netlify, ...
   > `serve()` enables you to define a single server entry while being able to target multiple environments (e.g. Node.js and Cloudflare have different server attachment styles).

Vike is automatically added to your server so that you don't need to manually integrate <Link href="/renderPage">`renderPage()`</Link> anymore.

There is still some boilerplate code, but we're also working on a zero-config setup.

You can learn more at <Link href="/vike-server" />.


## HMR

If you change a server file, the server code is automatically updated: the next HTTP response will be generated by the latest code. No more full server reload required.

> This is experimental and doesn't always work: `vike-server` sometimes still triggers a full server reload.

If HMR isn't what you want (for example if you modify the database connection) you can manually trigger a full server reload by pressing `r + enter`.


## Getting started

See <Link href="/vike-server" /> to get started.



## Releasing `1.0`

We are a lot closer to releasing `vike@1.0.0`. Our roadmap is:
 - Implementing the handful of feature requests that are blocking.
 - Lot's of polishing. (This will introduce several minor breaking changes.)
   > Our polishing work includes [type safe routing](https://github.com/vikejs/vike/issues/2253).

We expect Vike to stay on `1.x.x` for a (very) long time. One of Vike's unique characteristics is its inherently stable core (because it's agnostic; see <Link href="/why#architecture" />). We want to double down on that.

Beyond stability, we're working on making Vike feature-complete (no known blockers) and highly polished (state-of-the-art DX).


## Vite's Environment API

The `vike-server` extension will increasingly leverage Vite's new Environment API. To understand what it unlocks see: <Link href="/blog/vite-6" />.


## Sharing with other frameworks

Most of what we've built is agnostic to Vike.

So why not share our work? That's what we aim to do and we're in talks with other Vite-based frameworks and deployment providers.

Right now, each framework is reinventing the wheel — despite the complexity involved. There's a clear need for a shared server infrastructure that many frameworks can rely on.


## See also

- <Link href="/vike-server" />
- <Link href="/blog/vite-6" />
- <Link href="/why" />
